<template>
    <page-view>
        <el-card>
            <template #header>
                <div class="font-bold">评论信息列表</div>
            </template>
            <el-form :model="queryFormData" :inline="true">
                <el-form-item label="菜品名称">
                    <el-input placeholder="请输入菜品名称" v-model="queryFormData.food_name"></el-input>
                </el-form-item>
                <el-form-item label="评论时间">
                    <el-date-picker type="daterange" range-separator="到" start-placeholder="开始日期" end-placeholder="结束日期"
                        :teleported="false" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="queryData" :loading="isLoading" :loading-icon="Eleme">
                        <el-icon>
                            <Search />
                        </el-icon>
                        查询
                    </el-button>
                </el-form-item>
            </el-form>
            <div v-loading="isLoading">
                <el-table :data="resultData.listData" border stripe max-height="550">
                    <el-table-column align="center" width="80" label="ID" prop="id"></el-table-column>
                    <el-table-column width="220" label="菜品名称" prop="foodInfo.food_name"></el-table-column>
                    <el-table-column label="评论时间">
                        <template #default="{ row }">
                            {{ formatDateTime(row.create_time) }}
                        </template>
                    </el-table-column>
                    <el-table-column width="100" align="center" label="用户" prop="userInfo.nickName"></el-table-column>
                    <el-table-column label="评论内容" width="280">
                        <template #default="{ row, $index }">
                            <el-link type="primary" @click="currentCommentIndex($index)">
                                <el-popover placement="top-start" title="评论内容" width="260" tigger="hover"
                                    :content="row.comment_text">
                                    <template #reference>
                                        <el-link underline type="primary">
                                            {{ textEllipsis(row.comment_text, 15) }}
                                        </el-link>
                                    </template>
                                </el-popover>
                                <el-icon class="el-icon--right">
                                    <icon-view />
                                </el-icon>
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="星级">
                        <template #default="{ row }">
                            <el-rate v-model="row.star" allow-half size="large" :disabled="true" />
                        </template>
                    </el-table-column>
                    <el-table-column width="130" align="center" label="是否显示">
                        <template #default="{ row }">
                            <el-switch inactive-color="orange" size="large" v-model="row.isShow" inline-prompt
                                active-text="显示" inactive-text="不显示" @change="isShowChange(row)" />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="130" label="操作">
                        <template #default="{ row }">
                            <el-popconfirm :icon="InfoFilled" icon-color="orange" title="确定要删除吗?"
                                @confirm="delCurrentItem(row.id)">
                                <template #reference>
                                    <el-button :plain="true" type="danger" size="small" @click="visible = true">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                        删除
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 页码 -->
                <div class="flex flex-row justify-between items-center mt-[10px]">
                    <div class="text-[14px]">当前第{{ queryFormData.pageIndex }}页，共{{ resultData.pageCount }}页，共{{
                            resultData.totalCount
                    }}条</div>
                    <el-pagination background layout="prev, pager, next" :total="resultData.totalCount"
                        @current-change="currentChange" />
                </div>
            </div>
        </el-card>
    </page-view>
    <el-drawer v-model="drawer" title="评论详细信息" direction="rtl" size="30%">
        <el-descriptions title="客户信息" :column="1" border>
            <el-descriptions-item width="20" label="菜品名称">
                {{ resultData.currentCommentList.foodInfo.food_name }}
            </el-descriptions-item>
            <el-descriptions-item label="菜品价格">
                {{ resultData.currentCommentList.foodInfo.price }}
            </el-descriptions-item>
            <el-descriptions-item label="评论时间">
                {{ formatDateTime(resultData.currentCommentList.create_time) }}
            </el-descriptions-item>
            <el-descriptions-item label="客户昵称">
                {{ resultData.currentCommentList.userInfo.nickName }}
            </el-descriptions-item>
            <el-descriptions-item label="客户性别">
                {{ resultData.currentCommentList.userInfo.user_sex }}
            </el-descriptions-item>
            <el-descriptions-item label="客户手机号">
                {{ resultData.currentCommentList.userInfo.user_phone }}
            </el-descriptions-item>
            <el-descriptions-item label="客户邮箱">
                {{ resultData.currentCommentList.userInfo.user_email }}
            </el-descriptions-item>
            <el-descriptions-item label="评分等级">
                <el-rate v-model="resultData.currentCommentList.star" allow-half size="large" :disabled="true" />
            </el-descriptions-item>
            <el-descriptions-item label="评论内容">
                {{ resultData.currentCommentList.comment_text }}
            </el-descriptions-item>
        </el-descriptions>

    </el-drawer>
</template>

<script setup>
import { textEllipsis } from "../../utils/StringUtils"
import { formatDateTime } from "../../utils/DataTimeUtils"
import { Search, Eleme, InfoFilled, Delete, Edit, View as IconView } from "@element-plus/icons-vue"
import { ref, reactive, onMounted } from "vue"
import API from "../../utils/API";
import { ElDrawer, ElNotification, ElMessage } from 'element-plus'


const visible = ref(false)


const drawer = ref(false);
const queryFormData = reactive({
    food_name: "",
    pageIndex: 1
})
const resultData = reactive({
    listData: [],
    pageCount: 0,
    pageStart: 0,
    totalCount: 0,
    currentCommentList: []
})

const isLoading = ref(false);


const queryData = () => {
    isLoading.value = true;
    API.commentInfo.getListByPage(queryFormData)
        .then(result => {
            // console.log(result);
            resultData.listData = result.listData;
            resultData.pageCount = result.pageCount;
            resultData.pageStart = result.pageStart;
            resultData.totalCount = result.totalCount;
        }).finally(() => {
            isLoading.value = false;
        })

}

const currentCommentIndex = (index) => {
    // console.log(index);
    drawer.value = true;
    resultData.currentCommentList = resultData.listData[index];
    console.log(resultData.currentCommentList);
}

const currentChange = (index) => {
    queryFormData.pageIndex = index;
    queryData();
}



// 删除功能
const delCurrentItem = (id) => {
    // console.log(id);
    API.commentInfo.deleteById(id)
        .then(() => {
            ElMessage.success('删除成功')
            queryData();
        }).catch(() => {
            ElMessage.error('删除失败')
        })
}


const isShowChange = (row) => {
    // console.log(row.isShow);
    if (row.isShow) {
        API.commentInfo.setCommentShowById({ id: row.id })
        ElNotification({
            title: '提示',
            message: '评论已设置显示',
            type: 'success',
        })
        isDisabled.value = false;
    }
    else {
        API.commentInfo.setCommentHideById({ id: row.id })
        ElMessage.warning('评论已设置不显示')
        row.isShow = false;
    }
}

onMounted(() => {
    queryData();
})

</script>


<style scoped lang="scss">

</style>